<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<head th:include="include :: ztree-css"></head>
<style>
ul.ztree {
    margin-top: 10px;
    border: 1px solid #617775;
    background: #f0f6e4;
    width: 300px;
    height: 360px;
    overflow-y: scroll;
    overflow-x: auto;
}
</style>
<body class="white-bg">
<div class="row  border-bottom white-bg dashboard-header">
	<form class="form-horizontal m" id="form-contestProblem-add">
		<input id="id" name="id"th:value="${contest.id}"  type="hidden">
		<div class="col-sm-12">
			<div class="ibox-title">
				<h5>[[${contest.title}]]</h5><br>
				从左框拖拽到右框实现选题(最多26题)；右框中上下拖拽实现排序。
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox-title">
				题库中的题目
			</div>
			<div class="ibox-content">
				<ul id="treeDemo" class="ztree"></ul>			
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox-title mysel">
				已选择【0】题
			</div>
			<div class="ibox-content">
				<ul id="treeDemo2" class="ztree"></ul>			
			</div>
		</div>
	<div class="col-sm-4">
			<div class="ibox-title">
				<button id="save" class="btn btn-primary btn-lg " href="#" ><i class="fa fa-save"></i>提交</button>
			</div>
		</div>
	</form>
	
</div>
<div th:include="include::footer"></div>
<div th:include="include::ztree-js"></div>
<script type="text/javascript">
	var prefix = ctx + "acm/contestProblem";
	var contestId="[[${contest.id}]]";
		var setting = {
			async:{
				enable: true,
				url:ctx + "acm/problem/list3?id="+contestId
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				onDrop: onDrop
			},
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false,

			},
			view:{
				showLine:false,
				showIcon:false
			}
		};
var setting2 = {
		async:{
			enable: true,
			url:ctx + "acm/problem/list32?id="+contestId
		},
			edit: {
				enable: true,
				showRemoveBtn: true,
				showRenameBtn: false,
				drag:{
					prev: true,
					next: true,
					inner: canInner
				}
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				onDrop: onDrop,
				onRemove:onRemove
			}
		};
var dragtreeId="";
function beforeDrag(treeId, treeNodes) {
	dragtreeId=treeId;
	for (var i=0,l=treeNodes.length; i<l; i++) {
		if (treeNodes[i].drag === false) {
			return false;
		}
	}
	return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
	if(dragtreeId==treeId && moveType=="inner") return false;
	else if(dragtreeId!=treeId && targetNode) return false;
	return targetNode ? targetNode.drop !== false : true;
}
function onDrop(event, treeId, treeNodes, targetNode, moveType) {
	if(treeId=="treeDemo2") mysel();
}
//禁止拖拽成为根节点的子节点
function canInner(treeId, nodes, targetNode) {
	return !(targetNode && targetNode.level === 0);
}
function onRemove(event, treeId, treeNode) {
	mysel();
}
function mysel(){
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo2");
	var nodes = treeObj.getNodes();
	var n=0;
	if(nodes){
		n=nodes.length;
	}
	$(".mysel").html("已选择【"+n+"】题");
	if(n<=0) $('#save').prop('disabled', true);
	else $('#save').prop('disabled', false);
}
$(function() {
  $.fn.zTree.init($("#treeDemo"), setting);
  $.fn.zTree.init($("#treeDemo2"), setting2);
  setTimeout(mysel, 1000);
  $('#save').click(function() {
		if ($.validate.form()) {
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo2");
			var nodes = treeObj.getNodes();
			var n=0;
			if(nodes){
				n=nodes.length;
			}
			if(n<=0)return;
			var ids="";
			for(var i=0;i<n-1;i++) ids+=nodes[i].id+",";
			ids+=nodes[n-1].id;
			$.operate.save(prefix + "/addDo2", {"ids":ids,"contestId":contestId});
		}
	})
});
    
	$("#form-contestProblem-add").validate({
		onkeyup: false,
		rules:{
			xxxx:{
				required:true,
			},
		}
	});

	
</script>
</body>
</html>
